<template>
  <div class="main">
    <search @filterTask="filterTask" />
    <div class="result">
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addTask">新建</el-button>
      <task-table :task-operation-list="taskOperationList" />
      <page v-if="totalCount > pageSize" :total-count="totalCount" :current-page.sync="pageIndex" :page-size="pageSize" :total-page="totalPage" @currentChange="getTaskSearchList" />
      <add-task :dialog-visible.sync="dialogVisible" />
    </div>

  </div>
</template>

<script>
import search from './components/search.vue'
import addTask from './components/addTask.vue'
import TaskTable from './components/taskTable.vue'
import { getTaskSearchList } from '@/api/task'
import page from '@/components/page'
export default {
  components: { search, TaskTable, addTask, page },
  data() {
    return {
      dialogVisible: false,
      dialogOpen: false,
      totalPage: 1,
      pageIndex: 1,
      pageSize: 10,
      totalCount: 1,
      taskOperationList: [],
      taskCode: ''
    }
  },
  created() {
    this.getTaskSearchList()
  },
  methods: {
    addTask() {
      this.dialogVisible = true
    },
    // 表格数据渲染
    async getTaskSearchList() {
      const { data } = await getTaskSearchList({
        isRepair: true,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        status: this.state,
        taskCode: this.taskCode
      })
      this.taskOperationList = data.currentPageRecords
      this.totalPage = +data.totalPage
      this.totalCount = +data.totalCount
      // console.log(data)
    },
    // 搜索更新数据
    async  filterTask(state) {
      if (state.status !== '') {
        if (state.status === '待办') {
          this.state = 1
        } else if (state.status === '进行') {
          this.state = 2
        } else if (state.status === '取消') {
          this.state = 3
        } else {
          this.state = 4
        }
      }
      this.taskCode = state.taskCode
      this.pageIndex = 1
      this.getTaskSearchList()
    }

  }

}
</script>

<style lang="scss" scoped>

.result {
  padding: 20px 15px 19px 17px;
  background-color: #fff;

    .el-button--primary {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    font-size: 14px;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    border: none;
    // margin-right: 15px !important;
   ::v-deep .el-icon-circle-plus-outline{
      font-size: 16px !important;
   }
    }
     .page {
    width: 100%;
    height: 96px;
    padding: 32px 16px;
  }
  .totalPage {
    display: inline-block;
    font-size: 16px;
    width: 955px;
    height: 28px;
    margin: 0px 10px 0px 0px;
    color: #dbdfe5;
  }
    }

</style>

